<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>材料工程1901</title>
    <link rel="shortcut icon" href="bitbug_favicon (1).ico" />
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/轮播图.css">
    <script src="js/animate.js"></script>
    <script src="js/轮播图.js"></script>
    <!--  <script>
        // 索引模块
        window.addEventListener('load', function () {
            var cloud = document.querySelector('.cloud');
            var c_nav = document.querySelector('.c_nav');
            var lis = document.querySelectorAll('li');
            // var a = document.querySelectorAll('a');
            // 给所有的小li绑定事件
            var current = 0;  //这个current作为cloud起始位置
            for (var i = 0; i < lis.length; i++) {
                lis[i].addEventListener('mouseenter', function () {
                    animate(cloud, this.offsetLeft);
                });
                lis[i].addEventListener('mouseleave', function () {
                    animate(cloud, current);
                });
                lis[i].addEventListener('click', function () {
                    current = this.offsetLeft;
                });
            }
        })
    </script> -->
    <style>
        body {
            overflow: scroll;
            overflow-x: hidden;
        }

        .main {
            height: 1200px;
        }

        .a1 {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: -99;
        }

        .bg {
            width: 800px;
            height: 160px;
            margin: 0 auto;
        }

        .bg>img {
            width: 100%;
            height: 100%;
        }

        .index {
            width: 100%;
            font-size: 16px;
            color: #000;
            border-bottom: 2px solid #333;
        }

        .header {
            position: relative;
            margin-bottom: 15px;
        }

        .header .hb {
            width: 300px;
            height: 200px;
            margin-top: 20px;
        }

        .header .hb .f_text {
            position: absolute;
            right: 0;
            bottom: 0;
            height: 200px;
            width: 480px;
            padding: 5px;
            font-size: 16px;
            /* background-color: rgb(226, 97, 97) ; */
            background: rgba(236, 96, 96, 0.4);
            border: 1px solid #333;
            color: #000;
        }

        /* 引索模块 */
        .nav {
            border-bottom: 2px solid #333;
            margin-bottom: 15px;
        }

        .c-nav {
            position: relative;
            height: 20px;
            line-height: 20px;
        }

        .c-nav span {
            border-radius: 10px;
        }

        .c-nav ul li {
            width: 160px;
            height: 20px;
            font-size: 20px;

            float: left;
            text-align: center;
        }

        .c-nav ul li:hover a {
            color: red;
        }

        .c-nav ul li a {
            color: #000;
        }

        a {
            text-decoration: none;
            color: #666;
        }

        .circle {
            display: none;
        }

        .back {

            float: right;
        }

        .back a {
            font-size: 16px;
            color: #000;

        }

        /* 文字介绍部分 */
        .inroContent {
            padding: 5px;
            font-size: 16px;
            /* background-color: rgb(226, 97, 97) ; */
            background: rgba(236, 96, 96, 0.4);
            border: 1px solid #333;
            color: #000;
        }

        /* 团旗团徽大小 */
        .imgs1 {
            width: 300px;
            height: 200px;
        }

        .imgs2 {
            width: 250px;
            height: 250px;
        }

        audio {
            height: 40px;
            width: 250px;
            vertical-align: middle;
            margin-top: 10px;
        }

        .class {
            margin-bottom: 15px;
        }

        /* 换肤 */
        .huanFu {
            border: 1px solid #333;
            position: fixed;
            left: 0;
            top: 100px;
            width: 180px;
            height: 400px;
        }

        .huanFu .tu img {
            width: 180px;
            height: 100px;
            margin-bottom: 5px;
            cursor: pointer;
        }

        .huanFu .titl {
            color: #000;
            font-size: 16px;
            /* float: left; */
        }
        .huanFu .titl span {
            /* display: inline-block; */
            font-weight: 700;
            font-size: 16px;
            /* float: left; */
        }
        /* 图标转换 */
        .logo {
            width: 50px;
            height: 50px;

        }
       /*  .logo img {
            width: 50px;
            height: 50px;           
        } */
        /* .logo ul li {
            float: left;
            width: 50px;
            height: 50px;
        } */
    </style>

</head>

<body>
    <div class="main"> <img src="images/下载 (1).jpg" alt="" class="a1">
        <div class="bg">
            <img src="images/zwq2.jpg" alt="" id="back">
            <!-- 引索模块 -->
            <div class="nav">
                <div class="c-nav" id="c-nav">
                    <span class="cloud"></span>
                    <ul>
                        <li><a href="#header">学风建设</a></li>
                        <li><a href="#class">班级团支部建设</a></li>
                        <li><a href="#thought">思想建设</a></li>
                        <li><a href="#org">组织建设</a></li>
                        <li><a href="#symble">组织象征和标志</a></li>
                    </ul>
                </div>
            </div>
            <!-- 头部模块 -->
            <div class="header">
                <div class="index" id="header">学风建设
                    <span class="back"><a href="#back">返回</a></span>
                </div>
                <div class="hb">
                    <!-- 轮播图 -->
                    <div class="focus">
                        <a href="javascript:;" class="arrow1">
                            < </a>

                                <a href="javascript:;" class="arrow2">
                                    >
                                </a>
                                <!-- 核心滚动区域 -->
                                <ul>
                                    <li><a href="#"><img src="upload/2.jpg" alt=""></a></li>
                                    <li><a href="#"><img src="upload/3.jpg" alt=""></a></li>
                                    <li><a href="#"><img src="images/1.jpg" alt=""></a></li>
                                    <!-- <li><a href="#"><img src="/511/紫电一闪/无敌/5.jpg" alt=""></a></li> -->
                                </ul>
                                <!-- 小圆圈 -->
                                <ol class="circle">

                                </ol>
                    </div>
                    <div class="f_text">
                        以培养四有人才为目标，在团组织中营造良好学风、班风。以健全基层团支部学风建设为中心，通过加强特称团支部学风建设计划，以点带面，促进团组织整体性学风建设工作
                        建设良好的学风，积极营造优良的校风,以饱满的热情和积极向上的精神风貌迎接教育部本科教学评估,需要我们大家共同努力，也是我们每一个现代学子的责任和义务。<br>
                        希望未来我们能够更好地融入中国共青团，在相互学习交流中不断地取得进步，向阳而生。
                    </div>
                </div>
            </div>
            <div class="class">
                <span class="back"><a href="#back">返回</a></span>
                <div class="index" id="class">班级团支部建设

                </div>
                <div class="inroContent">

                    1. 班级团支部成员如下：
                    团支书：孙义 班长：李佳浩 学习委员：张子豪 房瑞丽 卫生委员：曲书函<br>
                    2.
                    班级团员状况情况如下：我班共有47人，其中有团员36人，群众11人。我班是由各地区的47名学生组成的一个优秀的班集体也是一个优秀的团支部,在各位老师的指导下,我班不论是在思想上、学习上,还是工作、学校活动中,都能发挥出各自的才能与优势、努力奋斗,为个人、也为班级、更为院校,取得优异的成绩。同时我们的努力也得到了各位老师的充分肯定,在接下来的时间里我们会继续认真积极的态度参加校内组织的活动与学习互动,争取把目标定得更高,把工作做得更好。
                </div>
            </div>
            <div class="class">
                <span class="back"><a href="#back">返回</a></span>
                <div class="index" id="thought">思想建设

                </div>
                <div class="inroContent">
                    通过各种团日活动和理论学习,我团支部成员的自身思想修养大大提高。<br>
                    1．认真学习三个代表重要思想．同学们以三个代表的内容为主展开讨论,各抒己见,从不同角度阐述了三个代表 的重要性<br>
                    2 .利用每周日晚7点班会时间组织班级团员进行思想政治学习及形式政策学习,使我们的思想与时俱进。<br>
                    ３.及时反馈学生的思想动态,做好学生的思想疏导工作。初入学时,团支部成员经体察每位团员的思想后,及时组织学习党的理论知识及先进思想,不仅使团员的思想觉悟有所提高并树立了正确的人生观、价值观,而且积极的向团委靠拢。<br>
                </div>
            </div>
            <div class="class">
                <span class="back"><a href="#back">返回</a></span>
                <div class="index" id="org">组织建设

                </div>
                <div class="inroContent">
                    抓好团员的教育和管理，坚持“做优秀共青团员”教育。严格执行团的章程,本着公平、公正的原则,使团的各项活动都能顺利完成。<br>
                    1.团支部指导其他班委认真组织三会一课,内容包括“三个代表”重要思想、十六大思想以及《反分裂国家法》。<br>
                    2.按时的交纳团费,积极参加团内活动。我班团支部成员都能理解并认同团员交团费的义务和责任,所以每次都能及时、足量完成团费交纳工作。<br>
                    3.民主评议和“推优"工作进行顺利,开展民主评议时,同学们都能树立正确的选举评议态度,本着公平、公正的原则,本着一丝不苟的精神进行评议。<br>
                </div>


            </div>
            <div class="class">
                <span class="back"><a href="#back">返回</a></span>
                <div class="index" id="symble">组织象征和标志

                </div>
                <div class="inroContent">
                    <div class="imgs1"><img src="images/qi.png" alt=""></div>
                    团旗：<br>
                    中国共产主义青年团团旗旗面为红色，象征革命胜利；左上角缀黄色五角星，周围环绕黄色圆圈，象征中国青年一代紧密团结在中国共产党周围。
                    <div class="imgs2"><img src="images/hui.png" alt=""></div>
                    团徽：<br>
                    中国共产主义青年团团徽的内容为团旗、齿轮、麦穗、初升的太阳及其光芒，写有“中国共青团”五字的绶带。它象征着共青团在马克思列宁主义、毛泽东思想的光辉照耀下，团结各族青年，朝着党所指引的方向奋勇前进。<br>
                    团歌：<br> 中国共产主义青年团团歌为《光荣啊，中国共青团》。<br>
                    <audio src="团歌.mp3" controls="controls" loop='true'></audio> <span
                        style="color: rgb(255, 254, 254);font-size: 14px;">请注意音量</span>
                </div>
            </div>
            <div class="huanFu">
                <div class="titl">
                    <div class="logo">
                            <img src="images/hui.png" alt="">                        
                    </div>
                   <span> 点击切换背景图</span>
                </div>
                <div class="tu">
                    <img src="images/下载 (1).jpg" alt="">
                    <img src="images/s.jpg" alt="">
                    <!-- <img src="images/u=4292136708,2441741790&fm=26&gp=0.jpg" alt=""> -->
                    <img src="images/shol.jpg" alt="">
                    <img src="images/main.jpg" alt="">
                </div>
            </div>
        </div>
        <!-- 换肤 -->
        <script>
            var huanFu = document.querySelector('.huanFu');
            var bgImg = document.querySelector('.a1');
            var imgs = document.querySelector('.tu').querySelectorAll('img');
            for (var i = 0; i < imgs.length; i++) {
                imgs[i].onclick = function () {
                    // bgImg.style.backgroundImage = 'url(' + this.src + ')';
                    bgImg.src = this.src;

                }
            }
            var logo1 = document.querySelector('.logo').querySelector('img');
            huanFu.addEventListener('mouseover',function() {
                logo1.src = "images/00e93901213fb80e6e5e3d8636d12f2eb83894d7.gif";
            });
            huanFu.addEventListener('mouseout',function() {
                logo1.src = "images/hui.png";
            })
        </script>
</body>

</html>